<template>
    <div class="app-container">
      <el-dialog
      :title="title"
      width="90%"
      height="100%"
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="visible">
      <div class="demo-drawer__content dialogContent">
        <el-form ref="form" :model="form"  label-width="auto">
          <el-row>
            <el-col :span="6">
              <el-form-item label="物料名称:" prop="itemName" >
                <el-input
                  v-model="form.itemName"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格型号:" prop="specification">
                <el-input
                  v-model="form.specification"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送检单号:" prop="iqcCode">
                <el-input
                  v-model="form.iqcCode"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商:" prop="vendorName">
                <el-input
                  v-model="form.vendorName"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="送检数量:" prop="quantityCheck">
                <el-input
                  v-model="form.quantityCheck"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="送检单号:" prop="quantityCheck">
                <el-input
                  v-model="form.quantityCheck"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检验时间:" prop="inspectDate">
                <el-input
                  v-model="form.inspectDate"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抽样数量" prop="quantitySpotCheck">
                <el-input-number :controls="false"  v-model="form.quantitySpotCheck" disabled/>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="合格数量:" prop="receiveQty">
                <el-input
                  v-model="form.receiveQty"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="不合格数量:" prop="quantityUnqualified">
                <el-input
                  v-model="form.quantityUnqualified"
                  placeholder
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 中间的table -->
          <el-row>
            <el-table v-loading="loading1" :data="templateList" >
              <!-- <el-table-column type="index" label="序号" width="50" :index="indexMethod"></el-table-column> -->
              <el-table-column label="检查项目" align="center" prop="inspectionItem" width="160px"/>
              <el-table-column label="缺陷等级" align="center" prop="defectLevel"  >
                <template  slot-scope="scope">
                  {{ scope.row.defectLevel =='1' ? "A" :scope.row.defectLevel =='2'?"B":"C" }}
                </template>
              </el-table-column>
              <el-table-column label="检验标准及检验方法" align="center" prop="inspectionStandard" width="260px" />
              <el-table-column label="检验方式及工具" align="center" prop="inspectionMethod" width="260px" />
              <el-table-column label="抽样标准" align="center" prop="samplingStandards" width="260px" />
              <el-table-column label="判定" align="center" prop="checkResult" width="260px" >
                <template  slot-scope="scope">
                    <div class="headerDiv" >
                      <span>Ac={{ scope.row.acceptQty }},</span><span>Re={{ scope.row.rejectQty }}</span>
                    </div>
                </template>
              </el-table-column>
              <!-- <el-table-column label="参考图片" align="center" prop="referenceImage" width="260px" /> -->
              <el-table-column label="检验记录" align="center" prop="analysisMethod" width="260px" >
                <template  slot-scope="scope">
                    <div class="headerDiv" v-if="scope.row.analysisMethod=='1'">
                      <!-- {{ scope.row.analysisMethod == "1"?"有比较值":"/"}} -->
                      <span>目标值:{{ scope.row.targetVal }}</span>
                      <div>比较符{{ scope.row.compareSymbol }}</div>
                      <span>上限差:{{ scope.row.upLimit }}</span><span>下限值:{{ scope.row.downLimit }}</span>
                      <span>上偏差:{{ scope.row.upOffset }}</span><span>下偏差:{{ scope.row.downOffset }}</span>
                    </div>
                </template>
              </el-table-column>

              <el-table-column
                v-for="(item,i) in form.quantitySpotCheck "
                :key="i"
                align="center"
                prop="recordArray"
                width="240px"
              >
                <template slot="header" slot-scope="scope">
                    <div class="headerDiv">
                      <el-input v-model="snObj[`snCode${i}`]" size="mini" placeholder="输入序列码" />
                    </div>
                </template>

                <template slot-scope="scope">
                  <div v-if="scope.row.analysisMethod == '1'">
                    <!-- 实际值{{ scope.row.recordArray[0].actualValue }} -->
                    实际值:<input v-model="scope.row.recordArray[i].actualValue" disabled/>
                  </div>
                  <el-radio-group v-model="scope.row.recordArray[i].checkResult" >
                        <el-radio :label="1" value="1">√</el-radio>
                        <el-radio :label="0" value="0">×</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>>

            </el-table>
          </el-row>

        

          <div>
            <el-row :span="24" class="imgDiv">
              <el-form-item label="检验结果" prop="checkResult">
                <el-radio-group v-model="form.checkResult" disabled>
                  <el-radio :label="1" value="1">√</el-radio>
                  <el-radio :label="0" value="0">×</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>

            <el-row
              v-for="(item,i) in form.failedSncode"
              :key="item.snCode"
              style="box-shadow: 0 0 7px rgb(186, 186, 186);padding:0 20px;margin-bottom:15px"
            >
              <p>
                <span>序列号:</span>
                <span>{{ item.snCode }}</span>
              </p>
              <el-col :span="24">
                <el-form-item label="不合格处理方式" prop="repairState">
                    <el-radio-group v-model="item.repairState" disabled>
                      <el-radio :label="1" >返工</el-radio>
                      <el-radio :label="2" >返修</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="检验记录">
                  <el-table :data="item.exceptionLogList">
                    <el-table-column label="类型选择" align="center" prop="indexType">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.indexType" placeholder type="textarea" disabled/>
                      </template>
                    </el-table-column>

                    <el-table-column label="异常描述" align="center" prop="describeData">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.describeData" placeholder type="textarea" disabled/>
                      </template>
                    </el-table-column>
                    <el-table-column label="文件上传" align="center" prop="checkResult">
                      <template slot-scope="scope">
                        <ImageUpload
                          :limit="1"
                          :value="item.sopUrl"
                          :fileSize="15"
                          @onUploaded="handleImgUplaoded"
                          @onRemoved="handleImgRemoved"
                        ></ImageUpload>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      align="center"
                      class-name="small-padding fixed-width"
                    >
                      <template slot-scope="scope">
                        <el-button
                          size="medium"
                          type="text"
                          icon="el-icon-circle-plus-outline"
                          @click="errorAdd(item,i)"
                        ></el-button>
                        <el-button
                          v-if="scope.$index != 0"
                          size="medium"
                          type="text"
                          icon="el-icon-remove-outline"
                          @click="errorDel(scope.$index,i)"
                        ></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          
        </el-form>
      </div>
      <div class="demo-drawer__footer" style="text-align: right;">
        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      </el-dialog>
       
    </div>
</template>

<script>
import { getDetail } from "@/api/mes/qc/iqc";
export default {
    name:"Iqc_detail",
    data(){
        return {
            //自动生成编码
            autoGenFlag:false,
            title:"检验详情",
            visible: false,
            form:{},
            optType: undefined,
            // 模板列表
            templateList: [],
            loading1:false,
            // 不合格数
            failedSncode: [],
            // 序列码集合
            snObj: {},
        }
    },
    created(){

    },
    methods:{
        init(isEdit,row){
          //this.form = { ...row };
          console.log("详情页面",row);
          this.visible = true;
          //调接口查询数据
          getDetail(row).then(res=>{
            this.form = { ...res.data }
            console.log(this.form,'详情res');
            this.templateList = this.form.qcIqcInspectionItemList
            //给序列号赋值
            this.templateList[0].recordArray.forEach((item,index)=>{
              this.snObj[`snCode${index}`] =item.snCode
                console.log(this.snObj,'snObj');
            })
            //不合格处理方式的值转成number类型
            this.form.failedSncode.map(item=>{
              return item.repairState = Number(item.repairState)
            })
            
            
          })
        },
        submitForm(){

        },
        // 取消按钮
        cancel() {
          this.visible = false;
          this.reset();
        },
        //图片上传成功
        handleImgUplaoded(imgUrl) {
          console.log(imgUrl);
          this.form.sopUrl = imgUrl;
        },
        //图片移除
        handleImgRemoved(imgUrl) {
          console.log(imgUrl);
          this.form.sopUrl = null;
        },
        // 异常记录增加
        errorAdd(item, i) {
          let obj = {};
          this.failedSncode[i].exceptionLogList.push(obj);
        },
        // 删除异常记录
        errorDel(index, i) {
          this.failedSncode[i].exceptionLogList.splice(index, 1);
        },
        // 表单重置
    reset() {
      this.form = {
        iqcId: null,
        iqcCode: null,
        iqcName: null,
        templateId: null,
        vendorId: null,
        vendorCode: null,
        vendorName: null,
        vendorNick: null,
        vendorBatch: null,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantityMinCheck: null,
        quantityMaxUnqualified: null,
        quantityRecived: null,
        quantityCheck: null,
        quantityUnqualified: null,
        crRate: null,
        majRate: null,
        minRate: null,
        crQuantity: null,
        majQuantity: null,
        minQuantity: null,
        checkResult: null,
        reciveDate: null,
        inspectDate: null,
        inspector: null,
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    },
    }
}
</script>

<style lang="css">

.el-input-number.is-without-controls .el-input__inner {
  width: 130px;
  line-height: 30px;
  height: 35px;
}
</style>